<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search">
      <el-input v-model="searchValue" placeholder="日期" clearable :prefix-icon="Search" />

      <el-button type="primary" @click="add" class="btn">
        <el-icon color="#fff" class="icon"><Plus /></el-icon>
      </el-button>
    </div>

    <!-- 内容组件 -->
    <el-scrollbar class="scorll">
      <div class="content">
        <!-- 组件 -->
        <div class="item" v-for="item in logs" :key="item.id">
          <div class="top">
            <div class="date">{{ dayjs(item.date).format('YYYY年MM月DD日') }}</div>
            <el-button-group class="group">
              <!-- 删除按钮 -->
              <el-button link type="primary" size="small" @click="delLog(item)">
                <Delete theme="outline" size="16" fill="#E74C3C" />
              </el-button>

              <el-button link type="primary" @click="$router.push({ name: 'sigleLog', params: { id: item.id } })"
                ><DocSearchTwo theme="outline" size="16" fill="#333"
              /></el-button>
              <el-button
                link
                type="primary"
                size="default"
                @click="$router.push({ name: 'team', params: { id: item.id } })"
                ><InsertTable theme="outline" size="16" fill="#333"
              /></el-button>
            </el-button-group>
          </div>

          <div class="txt">
            {{ item.content }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
  <logDialog :visiable="addVisiable" @close="close" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { DocSearchTwo, InsertTable, Delete } from '@icon-park/vue-next'
import logDialog from '@renderer/components/logDialog.vue'
import useLog from '@renderer/composables/useLog'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'

const searchValue = ref('')
const addVisiable = ref(false)

const { all, del, logs } = useLog()

const add = async () => {
  // window.api.read()
  // const data = await window.api.sql("INSERT INTO comp (name,created_at) VALUES ('睿涵',datetime())", 'insert')
  // console.log(data)
  addVisiable.value = true
}
const close = async () => {
  await all()
  addVisiable.value = false
}

// 删除
const delLog = async (item: logModel) => {
  await ElMessageBox.confirm(`是否删除${item.date}的记录`, '警告!', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await del(item.id!)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
  all()
}
all()
</script>

<style lang="scss" scoped>
.search {
  @apply flex;
  .btn {
    @apply ml-2;
  }
}

.scorll {
  @apply h-[590px];
  .content {
    .item {
      @apply pt-5 pb-2 border-b-2;
      .top {
        @apply flex justify-between items-center mb-2;
        .date {
          @apply text-slate-700 text-sm font-bold;
        }
        .group {
          @apply mr-2;
        }
      }
      .txt {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        @apply text-gray-500 text-sm;
      }
    }
  }
}
</style>
